<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的基本使用（库）</title>
		<!-- 导包 -->
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<!-- 视图模板 -->
		<div id="app">
			<div>{{message}}</div>
			<div>{{val}}</div>
			<button @click="updateVal()">修改message</button>
			<div class="show" v-if="isShow">{{isShow}}</div>
			<div class="item" v-for="item in list">循环的值：{{item}}</div>
			<div class="count">计数器：{{count}}</div>
		</div>
		
	</body>
</html>
<script>
	// vue:面向数据编程
	const {createApp} = Vue;
	// 创建一个应用程序，并放在变量中
	const app = createApp({
		// 数据
		data(){
			return {
				message:'通知信息',
				val:'heheheheh',
				isShow:true,
				list:[1,2,3,4],
				count:0
			}
		},
		// 定义修改数据的方法
		methods:{
			updateVal(){
				this.message = this.val
			}
		},
		mounted() {
			setInterval(function(){
				this.count++
			},1000)
		}
	});
	// 视图数据连接层
	// vue应用了mvvm的思想，m：model数据，v:view视图，vm：viewModel视图数据连接层
	const vm = app.mount("#app")
</script>